import React from "react";
import { View, Text, Button} from '@tarojs/components';
import { CloseCircleOutlined } from '@ant-design/icons';
import { SectionDescription, SectionDescriptionTran, SectionIcon } from "@/constants/constants";
import RefInput from "./refInput";

interface GenericContentSectionProps {
  contentData: {
    subSectionType: string;
    content: string;
  };
  onChange: (updatedContent: any) => void;
  onRemove: () => void;
  active: boolean;
}

const GenericContentSection: React.FC<GenericContentSectionProps> = ({ contentData, onChange, onRemove, active }) => {
  const handleChange = (newContent: string) => {
    onChange({ ...contentData, content: newContent });
  };

  const handleRemove = () => {
    onRemove();
  };

  const IconComponent = SectionIcon[contentData.subSectionType];

  return (
    <View style={{ backgroundColor: "white", padding: "5px" }}>
            {active && <IconComponent />}
            <Text style={{ marginLeft: 8 }} className='subsection-title'>
              {SectionDescriptionTran[contentData.subSectionType]}
            </Text>
            <View className='hint-text' style={{ marginLeft: 8 }}>
              {SectionDescription[contentData.subSectionType]}
            </View>
          <Button onClick={handleRemove}>
            <CloseCircleOutlined />
          </Button>
      <RefInput
        value={contentData.content}
        onChange={(e) => handleChange(e)}
        active={active}
      />
    </View>
  );
};

export default GenericContentSection;
